<template>
	<view class="main">
		<view class="flex align between topSearch">
			<view style="width: 74%;">
				<uni-search-bar v-model="searchValue" @input="input" placeholder="输入视频名称搜索">
				</uni-search-bar>
			</view>
			<view class="addBtn flex align" @click="toUrl()">添加云剪辑<uni-icons type="plus" size="20"
					color="#fff"></uni-icons></view>
		</view>
		<view class="tabs flex align between">
			<view class="flex align tab-item" @click="toShow">
				{{statusName}}
				<image src="../../static/icon3.png"></image>
				<view class="tab-option" v-if="show">
					<view @click="toAct('','全部状态')">全部状态</view>
					<view @click="toAct(1,'待剪辑')">待剪辑</view>
					<view @click="toAct(2,'剪辑中')">剪辑中</view>
					<view @click="toAct(3,'剪辑成功')">剪辑成功</view>
					<view @click="toAct(4,'剪辑失败')">剪辑失败</view>
				</view>
			</view>
			<!-- <view class="flex align tab-item">
				添加时间
				<image src="../../static/icon3.png"></image>
			</view> -->
		</view>
		<view class="list" v-for="(item,index) in list" :key="index">
			<view class="list-head flex align between">
				<view>{{item.title}}</view>
				<view>{{item.addtime}}</view>
			</view>
			<view class="list-info flex align between" @click="toLook(item.id)">
				<view class="list-info-left">
					<view>预计剪辑数 <text>{{item.video_count}}</text></view>
					<view>已完成剪辑 <text>{{item.video_count_real}}</text></view>
					<view>预计时长 <text>{{item.video_time}}</text></view>
				</view>
				<view class="list-info-right">
					<view>当前状态</view>
					<view
						:style="item.status==1?'background:#AFAFAF':item.status==2?'background:#00ACFF':item.status==3?'background:#369805':item.status==4?'background:#B40A05':''">
						{{item.status==1?'待剪辑':item.status==2?'剪辑中':item.status==3?'剪辑成功':item.status==4?'剪辑失败':''}}
					</view>
				</view>
			</view>
			<view class="trash flex align"><uni-icons color="#fff" type="trash" size="25"></uni-icons>删除</view>
		</view>
		<xw-empty :isShow="empty" text="暂无数据" textColor="#777777"></xw-empty>
		<uni-load-more :status="status" v-if="!empty" :content-text="loadText"></uni-load-more>
	</view>
</template>

<script>
	import {
		makeVideoIndex
	} from '@/api/apiData.js';
	export default {
		data() {
			return {
				searchValue: '',
				show: false,
				totalPage: 1,
				page: 0,
				offset: 20,
				list: [],
				scrollTop: 0,
				empty: false,
				loadText: {
					loadmore: '点击或上拉加载更多',
					loading: '努力加载中',
					nomore: '实在没有了'
				},
				status: 'loadmore',
				statusA: '',
				statusName: '全部状态'
			};
		},
		onLoad() {
			console.log(decodeURIComponent('%7B%22status%22%3A%221%22%7D'))
			console.log(decodeURIComponent('%7B%22status%22%3A%22%3D%22%7D'))
		},
		onShow() {
			this.page = 0
			this.list = []
			this.getlist();
		},
		onPageScroll(e) {
			const that = this;
			that.scrollTop = e.scrollTop;
		},
		onReachBottom() {
			const that = this;
			that.getlist();
		},
		methods: {
			toLook(id) {
				uni.navigateTo({
					url: '/pages/videoProdue/createLook?id=' + id
				})
			},
			toAct(n, name) {
				this.statusA = n
				this.statusName = name
				this.page = 0
				this.list = []
				this.getlist();
			},
			async getlist() {
				const that = this;
				const {
					totalPage,
					page,
					offset,
					list,
					group_id,
					type,
					searchValue,
					statusA
				} = that;
				let filter = {}
				if (searchValue != '') {
					if (statusA != '') {
						filter = {
							"title": searchValue,
							"status": statusA
						}
					} else {
						filter = {
							"title": searchValue
						}
					}
				} else {
					if (statusA != '') {
						filter = {
							"status": statusA
						}
					} else {
						filter = {}
					}
				}

				let obj = {
					menu_url: 'make_video_1',
					limit: offset,
					offset: page,
					filter: JSON.stringify(filter),
					op: JSON.stringify({
						"status": "="
					})
				};
				that.status = 'loading';
				if (totalPage > page) {
					let result = await makeVideoIndex(obj);
					that.page = page + 1;
					if (result.total == 0) {
						that.empty = true;
						that.status = 'nomore';
						return;
					}
					that.empty = false;
					setTimeout(() => {
						that.status = 'loadmore';
					}, 500);
					that.list = list.concat(result.rows);
					that.totalPage = Math.ceil(result.total / offset);
				} else {
					setTimeout(() => {
						that.status = 'nomore';
					}, 500);
				}
			},
			toShow() {
				this.show = !this.show
			},
			input(e) {
				this.page = 0
				this.list = []
				this.getlist();
			},
			toUrl() {
				uni.navigateTo({
					url: '/pages/videoProdue/add'
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.main {
		margin: 13rpx 30rpx;
	}

	.topSearch {
		.addBtn {
			background: #FFCDB8;
			color: white;
			border-radius: 14rpx;
			font-size: 20rpx;
			padding: 8rpx 14rpx;
		}
	}

	.tabs {
		background: white;
		padding: 15rpx 0;

		.tab-item {
			flex: 1;
			text-align: center;
			justify-content: center;
			position: relative;

			image {
				width: 22rpx;
				height: 12rpx;
				margin-left: 26rpx;
			}

			.tab-option {
				position: absolute;
				width: 100%;
				top: 60rpx;
				background: white;
				box-shadow: 1rpx 1rpx 1rpx 2rpx gainsboro;

				view {
					padding: 16rpx 0;
					border-bottom: solid 1rpx #D9D9D9;
				}
			}
		}
	}

	.list {
		background: white;
		margin-top: 19rpx;
		border-radius: 15rpx;

		.list-head {
			margin: 18rpx;
			padding: 26rpx 0 8rpx 0;
			border-bottom: solid 1rpx #D6D6D6;
			padding-bottom: 8rpx;

			view:nth-child(1) {
				font-size: 28rpx;
				font-weight: bold;
			}

			view:nth-child(2) {
				color: #868686;
				font-size: 18rpx;
			}
		}

		.list-info {
			padding: 8rpx 0;
			padding: 0 41rpx 23rpx;

			.list-info-left {
				view {
					margin-bottom: 10rpx;
				}

				font-size: 24rpx;

				text {
					margin-left: 77rpx;
				}
			}

			.list-info-right {
				view:nth-child(1) {
					color: #868686;
					font-size: 18rpx;
				}

				view:nth-child(2) {
					background: #AFAFAF;
					color: white;
					font-size: 28rpx;
					padding: 0 17rpx;
					border-radius: 20rpx;
					margin-top: 16rpx;
				}
			}
		}

		.trash {
			justify-content: center;
			background: #2D2D2D;
			color: white;
			font-size: 32rpx;
			font-weight: bold;
			padding: 15rpx 0;
			border-radius: 0 0 15rpx 15rpx;
		}
	}
</style>